<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="~{include-head :: head}"></div>
<link rel="stylesheet" type="text/css" href="/css/pagination.css"/>
<body >

<div th:replace="~{include-nav :: nav}"></div>
<div class="container-fluid" id="vuebox">
    <div class="row">
        <div th:replace="~{include-sidebar :: sidebar}"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="keywordInput"
                                       class="form-control has-success"
                                       type="text" placeholder="请输入查询条件" v-model="keyword">
                            </div>
                        </div>
                        <button id="searchBtn" @click="searchBtn()" type="button" class="btn btn-warning">
                            <i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button id="batchRemoveBtn" @click="removeRoleBtn()" type="button" class="btn btn-danger" style="float:right;margin-left:10px;">
                        <i class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='form.html'">
                        <i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">#</th>
                                <th width="30"><input id="summaryBox" type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="roleTableBody">
                                <tr v-for="item in roles.list">
                                    <td>{{item.id}}</td>
                                    <td><input :roleid="item.id" class="itemBox" type="checkbox"></td>
                                    <td>{{item.name}}</td>
                                    <td>
                                        <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
                                        <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
                                        <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                            <tr >
                                <td colspan="4" align="center">
                                    <button @click="firstPage(1)" class="btn btn-default">首页</button>
                                    <button @click="prePage(roles.pageNum-1)" class="btn btn-default">上一页</button>
                                    <button @click="nextPage(roles.pageNum+1)" class="btn btn-default">下一页</button>
                                    <button @click="endPage(roles.pages)" class="btn btn-default">末页</button>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{include-modal-role-confirm :: roleconfirm}"></div>
</div>
</body>
</html>
<script type="text/javascript" src="/script/jquery.pagination.js"></script>
<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
<script type="text/javascript" src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script type="text/javascript" src="/script/my-role.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#vuebox",
        data:{
            pageNum:"1",
            pageSize:"5",
            keyword:"",
            roles:{},
            removeRoles:{}
        },
        methods:{
            //加载数据列表
            loadAllRole:function (pageIndex) {
                axios.get("/role/search/by/keyword",{params:{pageNum:pageIndex,pageSize:this.pageSize,keyword:this.keyword}}).then(res => {
                    if (res.data.result=="SUCCESS"){
                        this.roles=res.data.data
                    }else{
                        layer.msg("无数据")
                    }
                });
            },

            //第一页
            firstPage:function (pageIndex) {
                axios.get("/role/search/by/keyword",{params:{pageNum:pageIndex,pageSize:this.pageSize,keyword:this.keyword}}).then(res => {
                    this.roles=res.data.data;
                });
            },

            //上一页
            prePage:function (pageIndex) {
                axios.get("/role/search/by/keyword",{params:{pageNum:pageIndex,pageSize:this.pageSize,keyword:this.keyword}}).then(res => {
                    if (res.data.data.isFirstPage){
                        layer.msg("已是第一页了！")
                    }
                    this.roles=res.data.data;
                });
            },

            //下一页
            nextPage:function (pageIndex) {
                axios.get("/role/search/by/keyword",{params:{pageNum:pageIndex,pageSize:this.pageSize,keyword:this.keyword}}).then(res => {
                    if (res.data.data.isLastPage){
                        layer.msg("已是最后一页了！")
                    }
                    this.roles=res.data.data;
                });
            },

            //末页
            endPage:function (pageIndex) {
                axios.get("/role/search/by/keyword",{params:{pageNum:pageIndex,pageSize:this.pageSize,keyword:this.keyword}}).then(res => {
                    this.roles=res.data.data;
                });
            },

            //根据关键字查询
            searchBtn:function () {
                axios.get("/role/search/by/keyword",{params:{pageNum:this.roles.pageNum,pageSize:this.pageSize,keyword:this.keyword}}).then(res => {
                    if (res.data.result=="SUCCESS"){
                        this.roles=res.data.data;
                    }else{
                        layer.msg("对不起查不到数据");
                    }
                });
            },

            //批量删除按钮
            removeRoleBtn:function () {
                //获取选中的数据

                // 获取被选中的itemBox数组长度
                var length = $(".itemBox:checked").length;

                // 如果长度为0，说明没有选择itemBox
                if(length == 0) {
                    layer.msg("请至少选择一条！");
                    return ;
                }
                // 在全局作用域内创建roleIdArray
                window.roleIdArray = new Array();

                // 遍历$(".itemBox:checked")
                $(".itemBox:checked").each(function(){

                    // 通过checkbox的roleid属性获取roleId值
                    var roleId = $(this).attr("roleid");

                    // 存入数组
                    window.roleIdArray.push(roleId);

                });
                // alert(window.roleIdArray);
                //显示选中的数据
                axios.get("/role/get/list/by/id/list",{params:{roleIdList:window.roleIdArray.toString()}}).then(res => {this.removeRoles=res.data.data});
                //打开模态框
                $("#confirmModal").modal("show");
            },

            //模态框OK删除
            removeBtn:function () {
                axios.get("/role/batch/remove",{params:{roleIdList:window.roleIdArray.toString()}}).then(res => {
                    if(res.data.result=="SUCCESS"){
                        //关闭模态框
                        $("#confirmModal").modal("hide");
                        layer.msg("删除成功");
                        this.loadAllRole(this.roles.pageNum);
                    }else{
                        //关闭模态框
                        $("#confirmModal").modal("hide");
                        layer.msg("删除失败");
                        this.loadAllRole(this.roles.pageNum);
                    }

                });
            }
        },
        mounted(){
            this.loadAllRole(1);
        }
    });


    $(function () {

        // 全选/全不选功能
        $("#summaryBox").click(function () {
            // 1.获取当前checkbox的选中状态
            var currentStatus = this.checked;
            // 2.设置itemBox的选中状态
            $(".itemBox").prop("checked", currentStatus);
        });
    });
</script>
